// import React from "react";
import React from "./react";

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state={
            number:1
        }
        this.parentHandle = this.parentHandle.bind(this)
        this.add = this.add.bind(this)
    }
    add(event){
        event.stopPropagation()
        this.setState({
            number:this.state.number+1
        },()=>console.log('cb',this.state.number))//2
        console.log(this.state.number); //1
        // this.setState({
        //     number:this.state.number+1
        // },(state)=>console.log('cb',this.state.number)) //2
        // console.log(this.state.number); //1
        // setTimeout(()=>{
        //     this.setState({
        //         number:this.state.number+1
        //     },(state)=>console.log('cb',this.state.number)) //3
        //     console.log(this.state.number);   //3
        //     this.setState({
        //         number:this.state.number+1
        //     },(state)=>console.log('cb',this.state.number)) //4
        //     console.log(this.state.number); //4
        // },0)
    }
    parentHandle(){
        console.log('parentHandle');
    }
    render(){
        return (<div onClick={this.parentHandle}>
            <p>title:{this.props.title}</p>
            <p>number:{this.state.number}</p>
            <button onClick={this.add}> + </button>
        </div>)
    }
}

export default Counter